<template>
  <div id="mainDiv">
    <div id="info">
      <p id="title">个人简历</p>
      <ul> <!-- 无序列表 1 .是独占一行，内部元素li独占一行-->
        <li><span>姓名:</span><span>{{ admin.aname }} </span><span>联系方式:</span><span>139000xxx</span></li>
        <li><span>性别:</span><span alt="">男</span><span>籍贯:</span><span>四川</span></li>
        <li><span>毕业学校:</span><span>成都信息工程大学 </span><span>专业:</span><span>计算机科学与技术</span></li>
      </ul>
      <div id="photo" alt="uImg"><img></div>
    </div>
    <div id="skills">
      <p>我的订单</p>
      <hr>

        <div class="orderInfo">
<!--          <span>订单号</span>-->
          <span></span>
          <span>餐厅</span>
          <span>餐厅名称</span>
          <span>下单日期</span>
          <span>结束日期</span>
          <span>下单时间</span>
          <span>价格</span>

        </div>

      <div class="orderInfo"  v-for="(order,orderindex) in admin.orderForms" >
        <div>
<!--          <span>{{order.urno}}</span>-->
          <span @click="showorderitem(orderindex)">+</span>
          <span class="orderimg"><img :src="getImgUrl(order.restaurant.rimg)"></span>
          <span>{{order.restaurant.rname}}</span>
          <span>{{procesDate(order.uresdate)}}</span>
          <span>{{procesDate(order.uresendDate)}}</span>
          <span>{{procesTime(order.urestime)}}</span>
          <span>{{order.uresprice}}</span>
          <span @click="procesState(order)"> {{order.uresState}}</span>
        </div>

        <div class="orderItem" v-show="orderindex==currOrderindex">
          <ul>
            <li></li>
            <li v-for="(orderformitem,orderformitemIndex) in order.orderformitems">
              <span> {{ (orderformitemIndex+1)}}</span>
              <span>{{orderformitem.oiname}}</span>
              <span>{{orderformitem.oidesc}}</span>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div id="orders">
      <el-date-picker type="date" placeholder="选择日期" v-model="begindate" style="width: 100%;" @change="getFreeRestaurant()"></el-date-picker>
      <div class="restaurantInfo"  v-for="(restaurant,restaurantIndex) in restaurants" @click="showSchedule(restaurant.rno)">
        <ul>
          <li><img :src="getImgUrl(restaurant.rimg)"></li>
          <li>{{restaurant.rname}}</li>
          <li>{{restaurant.riddr}}</li>
        </ul>
      </div>

    </div>
    <div id="projectdesc"></div>
  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import utilsFD from "../../../../static/js/utils/index.js"

  import utils from "../../../../static/js/utils/utils.js"
  export default {
    name: "",
    data() {
      return {
        admin:[],
        pics:[],
        restaurants:[],
        ano:"",
        currOrderindex:-1,
        begindate:utilsFD.FD.Fd().initCNDate(new Date()),

        //enddate :utilsFD.FD.Fd().getMonthBeforeFormatAndDay(1,"-",new Date().getDay()),
        resDate: [
          //{"date":"2021-04-26","content":"放假"}
          ], //样本数据
        payDialogIsShow:false,
        scheduleDialogIsShow: false
      }

    },
    components : {

    },
    methods: {
      procesState(order){
        if(order.uresState=="待付款"){
          let _this = this;
          _this.payDialogIsShow = true;
          _this.$nextTick(() => {
            // console.log(this.resDate)
            this.$refs.showPay.init(order);
          })
        }
      },
      showPay:function(){

      },
      showSchedule:function(rno){

        let _this = this;
        _this.scheduleDialogIsShow = true;
        _this.$nextTick(() => {
        _this.resDate = "";
        _this.getResOrder(rno);

         // console.log(this.resDate)

        })
      },
      showorderitem(orderindex){
        this.currOrderindex = orderindex;
      },
      procesDate(date){
        return utilsFD.FD.Fd().initCNDateFromlong(date);
      },
      procesTime(time){
        return utilsFD.FD.Fd().initCNTime(new Date(time));
      },
      getImgUrl: function (rpic) {
        return this.$store.state.host + "/upload/images/restaurant/" + rpic;
      },
      getAdmin: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios( "/api/adminController/getAdminByAno/"+this.ano, null, "get")
          .then(dto => {
            console.log(dto);
            this.admin = dto.t;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },



    },
    created() {
      this.ano = this.$route.params.ano;
      if(this.ano==undefined||this.ano==null||this.ano==''){
        this.ano=localStorage.getItem('ano');
      }
      this.getAdmin();
      }
  }
</script>

<style type="text/css">
  /*margin表示到外边框，上一层元素的距离，最外层的div的上一层元素就是body，到左和右都为auto 就表示水平居中*/
  #mainDiv{border:solid 0px;width:1000px;height:600px;margin-left:auto;margin-right: auto;
    font-family: "微软雅黑";}
  #info{height:240px;border: dashed 1px;position: relative;}
  #title{width:200px; margin-left:auto;margin-right: auto;text-align: center;font-size:36px;
    margin-top:16px;}
  /* 用关系查找元素 来设置  例如   >  子元素*/
  #info > ul > li{list-style-type: none;margin-top:5px;}
  #info > ul > li > span{height:26px;display: inline-block;}
  #info > ul > li > span:nth-child(1){width:80px;}
  #info > ul > li > span:nth-child(2){width:140px;}
  #info > ul > li > span:nth-child(3){width:80px;}
  #skills{position: relative;}
  #skills >p {background-color: red;width:100px;height:26px;text-align: center;line-height: 26px;color:white;
    border-radius: 4px 4px 0px 0px}
  #skills > hr{width: 560px;position: absolute;top:16px;border:solid 1px red;}/*调整线的颜色*/
  #skills > ul > li{list-style-type: none;margin-top:5px;}
  #skills > ul > li > span{height:26px;display: inline-block;}
  #skills > ul > li > span:nth-child(1){width:140px;}
  #skills > ul > li > span:nth-child(2){width:140px;}
  #skills > ul > li > span:nth-child(3){width:80px;}


  #photo{width:80px;height:120px; border:solid 1px;position: absolute; right: 18px; top:26px;}
  #photo > img{width:80px;height:120px;}
  .adminListPane {width: 1000px; position :absolute ;left: 0}

  .orderInfo{  margin: 20px 100px 0 20px;}
  .orderInfo  span{display: inline-block;height: 30px; line-height: 30px; vertical-align: middle;font-family: "微软雅黑";font-size: 14px;text-align: center;padding: 0 20px}
  .orderInfo > div > span:nth-child(2){width: 30px}
  .orderInfo > div > span:nth-child(3){width: 60px}
  .orderInfo > div > span:nth-child(4){width: 80px}
  .orderInfo > div > span:nth-child(5){width: 80px}
  .orderInfo > div > span:nth-child(6){width: 160px}
  .orderInfo > div > span:nth-child(7){width: 50px}
  .orderItem > ul {margin: 0 ;padding: 0;}
  .orderItem > ul > li{list-style: none;}
  .restaurantInfo{ float: left;margin-left: 120px;margin-top:40px;width: 100px}
  .restaurantInfo ul{margin: 0;padding: 0}
  .restaurantInfo  ul  li img{width: 100px;height: 100px}
  .restaurantInfo li{list-style: none;text-align: center;font-family: "微软雅黑";font-size: 14px;padding-top: 6px}
  .imgDiv{ width: 80px; height: 80px}
  .imgDiv > img{ width :80px; height: 80px}
  .orderimg > img {width: 30px; height: 30px}






</style>
